{#
Required Input:
    component: {id, precision}
    mark: {id, title, publish, order, deleted}
    is_checked: True if the mark should appear checked in grade mode
    edit_marks_enabled: True if marks should appear editable
    edit_component_enabled: True if 'instructor' edit mode is enabled
    mark_disabled: True if the mark should appear uneditable in 'edit' mode
    show_publish: True to show the 'publish' option
#}
<div id="mark-{{ mark.id }}"
     class="mark-container row {{ mark.publish ? 'mark-publish' : '' }} {{ first_mark ? 'mark-first' : '' }} {{ not edit_marks_enabled and mark_disabled ? 'mark-disabled' : '' }} {{ mark.deleted ? 'mark-deleted' : '' }}"
     data-component_id="{{ component.id }}"
     data-mark_id="{{ mark.id }}"
     data-publish="{{ mark.publish }}"
     onclick="{{ edit_marks_enabled or mark_disabled ? '' : 'onToggleMark(this)' }}"
>
    {% if edit_marks_enabled %}
        <span class="reorder-mark-container col-no-gutters {{ first_mark ? 'hidden' : '' }}" title="Click and drag to reorder marks" aria-label="Click and drag to reorder marks">
            <i class="fas fa-ellipsis-v"></i>
        </span>
    {% endif %}
    <span class="mark-selector-container">
        {# Keep the mark checkbox so we can keep graded data when in edit mode to automatically update the component points #}
        <span class="{{ is_checked ? 'mark-selected' : '' }} {{ edit_marks_enabled ? 'hidden' : '' }} mark-selector col-no-gutters"
              data-mark_id="{{ mark.id }}">
            {{ mark.order }}
        </span>
    </span>
    <span class="col-no-gutters mark-points"
          data-points="{{ mark.points }}">
        {% if edit_marks_enabled %}
            <input id="mark-editor-{{ mark.id }}"
                   type="number"
                   onchange="onMarkPointsChange(this),changeMarkColor(this,document.getElementById('mark-editor-{{ mark.id }}').getAttribute('overall'))"
                   onmouseup="onMarkPointsChange(this),changeMarkColor(this,document.getElementById('mark-editor-{{ mark.id }}').getAttribute('overall'))"
                   step="{{ precision }}"
                   data-overall=""
                   value="{{ mark.points|round(decimal_precision) }}"
                    {{ first_mark ? 'disabled' : '' }}/>
            <script>
                {% if first_mark %}
                    var overall_title = "{{ mark.title  }}";
                {% endif %}
                document.getElementById("mark-editor-{{ mark.id }}").setAttribute("overall",overall_title);
                if(document.getElementById("mark-editor-{{ mark.id }}").getAttribute("overall")=="Full Credit"){
                    {% if mark.points > 0 %}
                        document.getElementById("mark-editor-{{ mark.id }}").style.backgroundColor="var(--standard-vibrant-yellow)";
                    {% else %}
                        document.getElementById("mark-editor-{{ mark.id }}").style.backgroundColor="var(--default-white)";
                    {% endif %}
                }
                else{
                    {% if mark.points < 0 %}
                        document.getElementById("mark-editor-{{ mark.id }}").style.backgroundColor="var(--standard-vibrant-yellow)";
                    {% else %}
                        document.getElementById("mark-editor-{{ mark.id }}").style.backgroundColor="var(--default-white)";
                    {% endif %}
                }
            </script>
        {% else %}
            {{ mark.points }}
        {% endif %}
    </span>
    <span class="col-sm mark-title"
          data-title="{{ mark.title|escape }}">
        {% if edit_marks_enabled %}
            <textarea onkeyup="auto_grow(this)" class="noscroll"
                    {{ first_mark ? 'disabled' : '' }}>{{ mark.title|escape }}</textarea>
        {% else %}
            {{ mark.title|nl2br }}
        {% endif %}
    </span>
    {% if show_publish %}
        {% if not first_mark %}
            <span class="col-no-gutters mark-publish-container">
                Show mark to all students: <input type="checkbox" {{ mark.publish ? 'checked' : '' }} onchange="onMarkPublishChange(this)"/>
            </span>
        {% endif %}
    {% endif %}
    <span class="col-no-gutters mark-tools" onclick="onGetMarkStats(this);event.stopPropagation()">
        <i class="fas fa-users icon-mark-stats" title="See who got this mark"></i>
    </span>
    {% if edit_marks_enabled %}
        {% if first_mark %}
            {# The first mark shouldn't get a real delete button, but to keep the tools aligned, put a hidden one in #}
            <span class="col-no-gutters mark-tools">
                <i class="fas fa-trash hidden"></i>
            </span>
        {% else %}
            <span class="delete-mark-container col-no-gutters mark-tools" onclick="onDeleteMark(this)" title="Tag for deletion">
                <i class="fas fa-trash"></i>
            </span>
            <span class="restore-mark-container col-no-gutters mark-tools" onclick="onRestoreMark(this)" title="Don't delete" hidden>
                <i class="fas fa-undo"></i>
            </span>
        {% endif %}
    {% endif %}
</div>
<script>
    function changeMarkColor(me,countUp) {
        if(countUp=="No Credit"){
            if(me.value<0){
                me.style.backgroundColor="var(--standard-vibrant-yellow)";
            }
            else {
                me.style.backgroundColor="var(--default-white)";
            }
        }
        else {
            if(me.value>0){
                me.style.backgroundColor="var(--standard-vibrant-yellow)";
            }
            else{
                me.style.backgroundColor="var(--default-white)";
            }
        }
    }
</script>
